<template>
	<div class="problem-container">
		<!-- 顶部信息 -->
		<div class="header">
			<div class="title-wrapper">
				<h1 class="title">{{ problem.title }}</h1>
				<div class="meta-info">
					<el-tag :type="getProblemDifficultyType(problem.difficulty)" size="medium" effect="dark">
						{{ problem.difficulty }}
					</el-tag>
					<span class="problem-type">{{ getProblemTypeName(problem.type) }}</span>
					<span class="problem-id">#{{ problem.id }}</span>
				</div>
			</div>
			<div class="actions">
				<el-button type="text" @click="toggleBookmark">
					<el-icon :size="20">
						<StarFilled v-if="isBookmarked" color="#F7BA2A" />
						<Star v-else />
					</el-icon>
				</el-button>
				<el-button type="text" @click="showHint">
					<el-icon :size="20"><Light /></el-icon>
				</el-button>
			</div>
		</div>

		<!-- 模式切换按钮 -->
		<div class="mode-toggle">
			<el-button :type="isReviewMode ? 'primary' : 'default'" @click="toggleMode('review')" size="large" round>
				<el-icon><Reading /></el-icon>
				背题模式
			</el-button>
			<el-button :type="!isReviewMode ? 'primary' : 'default'" @click="toggleMode('practice')" size="large" round>
				<el-icon><Edit /></el-icon>
				做题模式
			</el-button>
		</div>

		<!-- 题目内容区域 -->
		<div class="problem-content">
			<!-- 题目描述 -->
			<div class="problem-description">
				<h3 class="section-title">题目描述</h3>
				<div class="description-content" v-html="renderMarkdown(problem.description)"></div>
			</div>

			<!-- 答案显示 -->
			<div v-if="isReviewMode" class="solution-container">
				<h3 class="section-title">
					<el-icon><Document /></el-icon>
					答案解析
				</h3>
				<div class="solution-content" v-html="renderMarkdown(problem.solution)"></div>

				<!-- 相关题目 -->
				<div v-if="problem.relatedProblems && problem.relatedProblems.length > 0" class="related-problems">
					<h4 class="sub-title">相关题目</h4>
					<div class="related-list">
						<el-tag
							v-for="related in problem.relatedProblems"
							:key="related.id"
							type="info"
							effect="plain"
							class="related-item"
							@click="goToProblem(related.id)"
						>
							{{ related.title }}
						</el-tag>
					</div>
				</div>
			</div>

			<!-- 提示对话框 -->
			<el-dialog v-model="hintVisible" title="提示" width="50%">
				<div v-html="renderMarkdown(problem.hint)"></div>
				<template #footer>
					<el-button @click="hintVisible = false">关闭</el-button>
				</template>
			</el-dialog>
		</div>
		<!-- 评论区域 -->
		<div class="comments-section">
			<el-button type="primary" @click="toggleComments" round class="toggle-comments-btn">
				{{ showComments ? '隐藏评论' : '显示评论' }}
			</el-button>
			<div v-if="showComments" class="comments-container">
				<!-- 评论发布表单 -->
				<el-card shadow="hover" class="comment-form">
					<h3>发表评论</h3>
					<el-input v-model="newComment" type="textarea" :rows="3" placeholder="写下你的评论..." maxlength="500" show-word-limit />
					<div class="form-actions">
						<el-button type="primary" @click="submitComment" :disabled="!newComment.trim()"> 发布评论 </el-button>
					</div>
				</el-card>

				<!-- 评论列表 -->
				<div class="comment-list">
					<h3>全部评论 ({{ state.comments.length }})</h3>

					<div v-if="state.comments.length === 0" class="empty-comments">
						<el-empty description="暂无评论，快来发表你的看法吧~" />
					</div>

					<el-card v-for="(comment, index) in state.comments" :key="index" shadow="hover" class="comment-item">
						<div class="comment-header">
							<div class="user-info">
								<el-avatar :size="40" :src="comment.avatar" />
								<div class="user-meta">
									<span class="username">{{ comment.username }}</span>
									<span class="time">{{ comment.time }}</span>
								</div>
							</div>
							<el-tag v-if="comment.isAuthor" type="success" size="small">作者</el-tag>
						</div>
						<div class="comment-content">
							{{ comment.content }}
						</div>
						<div class="comment-actions">
							<el-button type="text" @click="likeComment(index)">
								<el-icon><Thumb /></el-icon>
								{{ comment.likes }} 赞
							</el-button>
							<el-button type="text" @click="replyToComment(index)">
								<el-icon><ChatDotRound /></el-icon>
								回复
							</el-button>
						</div>
					</el-card>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref,reactive } from 'vue';
import { Star, StarFilled, Reading, Edit, Document } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import 'highlight.js/styles/github.css';
import { marked } from 'marked';
// 实际使用时需要安装并引入 MathJax

const isReviewMode = ref(true);
const isBookmarked = ref(false);
const showSolution = ref(false);
const hintVisible = ref(false);
const selectedOption = ref('');
const fillAnswer = ref('');

const problem = ref({
	id: 1,
	title: '两数之和',
	difficulty: '简单',
	type: 'code', // 'code' | 'math' | 'multiple-choice' | 'fill-blank'
	description: `给定一个整数数组 nums 和一个目标值 target，请你在该数组中找出**和为目标值**的那**两个**整数，并返回他们的数组下标。
  
  你可以假设每种输入只会对应一个答案。但是，你不能重复利用这个数组中同样的元素。
  
  **示例:**
  
  \`\`\`
  给定 nums = [2, 7, 11, 15], target = 9
  
  因为 nums[0] + nums[1] = 2 + 7 = 9
  所以返回 [0, 1]
  \`\`\``,
	code: `function twoSum(nums, target) {
	let map = new Map();
	for (let i = 0; i < nums.length; i++) {
	  let complement = target - nums[i];
	  if (map.has(complement)) {
		return [map.get(complement), i];
	  }
	  map.set(nums[i], i);
	}
  }`,
	solution: `### 解题思路
  
  这道题可以使用**哈希表**来优化查找过程，将时间复杂度从O(n²)降低到O(n)。
  
  1. **初始化哈希表**：创建一个空的哈希表用于存储数组元素和对应的索引
  2. **遍历数组**：对于每个元素nums[i]，计算目标值与当前元素的差值 complement = target - nums[i]
  3. **检查哈希表**：如果complement存在于哈希表中，则返回两个元素的索引
  4. **存储当前元素**：将当前元素的值和索引存入哈希表
  
  ### 复杂度分析
  
  - 时间复杂度：O(n)，我们只遍历了包含有n个元素的列表一次
  - 空间复杂度：O(n)，所需的额外空间取决于哈希表中存储的元素数量
  
  ### 代码优化
  
  可以使用对象代替Map，在JavaScript中有时性能更好：
  
  \`\`\`javascript
  function twoSum(nums, target) {
	const obj = {};
	for (let i = 0; i < nums.length; i++) {
	  const complement = target - nums[i];
	  if (obj.hasOwnProperty(complement)) {
		return [obj[complement], i];
	  }
	  obj[nums[i]] = i;
	}
  }
  \`\`\``,
	hint: `### 小提示
  
  1. 暴力法是最直接的解法，但时间复杂度较高
  2. 考虑使用额外的数据结构来优化查找速度
  3. 哈希表可以在O(1)时间内完成查找操作
  4. 注意处理边界条件，如空数组或找不到解的情况`,
	formula: 'x^2 + y^2 = z^2',
	options: [
		{ label: 'A', value: 'A', text: '暴力枚举法，时间复杂度O(n²)' },
		{ label: 'B', value: 'B', text: '使用哈希表，时间复杂度O(n)' },
		{ label: 'C', value: 'C', text: '先排序再双指针，时间复杂度O(nlogn)' },
		{ label: 'D', value: 'D', text: '使用集合而不是哈希表' },
	],
	relatedProblems: [
		{ id: 15, title: '三数之和' },
		{ id: 18, title: '四数之和' },
		{ id: 167, title: '两数之和 II - 输入有序数组' },
	],
});

const state = reactive({
	comments: [
		{
			username: 'Java爱好者',
			avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
			content: '讲得非常详细，特别是红黑树的部分，解决了我一直以来的困惑！',
			time: '2025-04-01 10:30',
			likes: 15,
			isAuthor: false,
		},
		{
			username: '架构师老王',
			avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
			content: '关于扩容机制的解释很清晰，建议补充一下JDK7和JDK8在扩容时的具体区别。',
			time: '2025-04-02 14:45',
			likes: 8,
			isAuthor: true,
		},
	],
});

const toggleMode = (mode: 'review' | 'practice') => {
	isReviewMode.value = mode === 'review';
	showSolution.value = false;
	selectedOption.value = '';
	fillAnswer.value = '';
};

const toggleBookmark = () => {
	isBookmarked.value = !isBookmarked.value;
	ElMessage.success(isBookmarked.value ? '已收藏题目' : '已取消收藏');
};

const showHint = () => {
	hintVisible.value = true;
};

const goToProblem = (id: number) => {
	ElMessage.info(`跳转到题目 #${id}`);
};

const getProblemDifficultyType = (difficulty: string) => {
	switch (difficulty) {
		case '简单':
			return 'success';
		case '中等':
			return 'warning';
		case '困难':
			return 'danger';
		default:
			return 'info';
	}
};

const getProblemTypeName = (type: string) => {
	const types: Record<string, string> = {
		code: '编程题',
		math: '数学题',
		'multiple-choice': '选择题',
		'fill-blank': '填空题',
	};
	return types[type] || '未知类型';
};

const renderMarkdown = (text: string) => {
	return marked(text || '');
};

const showComments = ref(false);
const newComment = ref('');

const toggleComments = () => {
	showComments.value = !showComments.value;
};

const submitComment = () => {
	if (!newComment.value.trim()) return;

	state.comments.unshift({
		username: '当前用户',
		avatar: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
		content: newComment.value.trim(),
		time: '刚刚',
		likes: 0,
		isAuthor: false,
	});

	newComment.value = '';
	ElMessage.success('评论发布成功');
};

const likeComment = (index: number) => {
	state.comments[index].likes++;
	ElMessage.success('点赞成功');
};

const replyToComment = (index: number) => {
	const username = state.comments[index].username;
	newComment.value = `@${username} `;
	ElMessage.info(`正在回复 ${username}`);
};
</script>

<style scoped lang="scss">
.problem-container {
	width: 100%;
	max-width: 900px;
	margin: 20px auto;
	padding: 30px;
	background-color: #fff;
	border-radius: 12px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 24px;

	.title-wrapper {
		flex: 1;

		.title {
			font-size: 28px;
			font-weight: 600;
			color: #2c3e50;
			margin: 0 0 12px 0;
			line-height: 1.3;
		}

		.meta-info {
			display: flex;
			align-items: center;
			gap: 12px;

			.problem-type {
				font-size: 14px;
				color: #5a6a7f;
				background-color: #f0f2f5;
				padding: 4px 8px;
				border-radius: 4px;
			}

			.problem-id {
				font-size: 14px;
				color: #7f8c9a;
			}
		}
	}

	.actions {
		.el-button {
			margin-left: 8px;
		}
	}
}

.mode-toggle {
	display: flex;
	justify-content: center;
	gap: 24px;
	margin: 24px 0;

	.el-button {
		width: 160px;
		font-weight: 500;

		.el-icon {
			margin-right: 8px;
		}
	}
}

.problem-content {
	.section-title {
		font-size: 20px;
		font-weight: 600;
		color: #2c3e50;
		margin: 24px 0 16px 0;
		padding-bottom: 8px;
		border-bottom: 1px solid #eee;
		display: flex;
		align-items: center;

		.el-icon {
			margin-right: 8px;
		}
	}

	.sub-title {
		font-size: 16px;
		font-weight: 500;
		color: #5a6a7f;
		margin: 16px 0 12px 0;
	}
}

.problem-description {
	margin-bottom: 24px;

	.description-content {
		font-size: 16px;
		line-height: 1.8;
		color: #3a4a5d;

		:deep(p) {
			margin: 0 0 16px 0;
		}

		:deep(pre) {
			background-color: #f6f8fa;
			border-radius: 6px;
			padding: 16px;
			overflow-x: auto;
			margin: 16px 0;
		}

		:deep(code) {
			font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
			font-size: 14px;
		}
	}
}

.code-block {
	margin-bottom: 24px;

	.code-content {
		background-color: #f6f8fa;
		border-radius: 8px;
		padding: 16px;
		overflow-x: auto;

		:deep(pre) {
			margin: 0;
			font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
		}
	}
}

.math-formula {
	margin-bottom: 24px;

	.formula-content {
		background-color: #f6f8fa;
		border-radius: 8px;
		padding: 16px;
		font-size: 18px;
		text-align: center;
	}
}

.multiple-choice {
	margin-bottom: 24px;

	.choice-list {
		display: flex;
		flex-direction: column;
		gap: 12px;
		width: 100%;
	}

	.choice-item {
		margin: 0;

		:deep(.el-radio__label) {
			display: flex;
			align-items: center;
		}

		.option-content {
			display: flex;
			align-items: center;

			.option-label {
				font-weight: 500;
				margin-right: 8px;
				color: #2c3e50;
			}

			.option-text {
				color: #3a4a5d;
			}
		}
	}
}

.fill-blank {
	margin-bottom: 24px;
}

.action-buttons {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin: 32px 0;

	.el-button {
		min-width: 160px;

		.el-icon {
			margin-right: 8px;
		}
	}
}

.solution-container {
	background-color: #f8fafc;
	border-radius: 12px;
	padding: 24px;
	margin-top: 24px;
	border: 1px solid #e4e8eb;

	.solution-content {
		font-size: 15px;
		line-height: 1.8;
		color: #3a4a5d;

		:deep(p) {
			margin: 0 0 16px 0;
		}

		:deep(pre) {
			background-color: #f0f2f5;
			border-radius: 6px;
			padding: 16px;
			overflow-x: auto;
			margin: 16px 0;
		}

		:deep(code) {
			font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
			font-size: 14px;
		}
	}
}

.related-problems {
	margin-top: 24px;

	.related-list {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	.related-item {
		cursor: pointer;
		transition: all 0.3s;

		&:hover {
			background-color: #e6f1ff;
			color: #1a73e8;
		}
	}
}

@media (max-width: 768px) {
	.problem-container {
		padding: 16px;
	}

	.header {
		flex-direction: column;

		.actions {
			margin-top: 12px;
			align-self: flex-end;
		}
	}

	.mode-toggle {
		flex-direction: column;
		gap: 12px;

		.el-button {
			width: 100%;
		}
	}

	.action-buttons {
		flex-direction: column;

		.el-button {
			width: 100%;
		}
	}
}
.comments-section {
	margin-top: 40px;
	padding: 0 10px;

	.toggle-comments-btn {
		display: block;
		margin: 0 auto 20px;
		padding: 12px 24px;
		font-size: 16px;

		.el-icon {
			margin-right: 6px;
		}
	}

	.comments-container {
		margin-top: 20px;
		border-top: 1px solid #eee;
		padding-top: 20px;

		.comment-form {
			margin-bottom: 30px;

			h3 {
				margin-top: 0;
				margin-bottom: 15px;
				font-size: 18px;
				color: #333;
			}

			.form-actions {
				margin-top: 15px;
				text-align: right;
			}
		}

		.comment-list {
			h3 {
				font-size: 18px;
				color: #333;
				margin-bottom: 20px;
				padding-bottom: 10px;
				border-bottom: 1px solid #eee;
			}

			.empty-comments {
				margin: 40px 0;
			}

			.comment-item {
				margin-bottom: 20px;

				.comment-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 12px;

					.user-info {
						display: flex;
						align-items: center;

						.user-meta {
							margin-left: 10px;
							display: flex;
							flex-direction: column;

							.username {
								font-weight: 500;
								font-size: 15px;
							}

							.time {
								font-size: 12px;
								color: #999;
								margin-top: 2px;
							}
						}
					}
				}

				.comment-content {
					font-size: 15px;
					line-height: 1.6;
					color: #333;
					margin-bottom: 12px;
					white-space: pre-line;
				}

				.comment-actions {
					text-align: right;

					.el-button {
						padding: 0 8px;
						font-size: 13px;
					}
				}
			}
		}
	}
}

@media (max-width: 768px) {
	.comments-section {
		.comments-container {
			padding: 15px 0;

			.comment-form {
				padding: 15px;
			}

			.comment-item {
				padding: 15px;
			}
		}
	}
}
</style>
